{% extends 'blog/base.html' %}

{% block title %}文章列表 - 个人博客{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <!-- 搜索和筛选 -->
        <div class="card mb-4">
            <div class="card-body">
                <form method="get" class="row g-3">
                    <div class="col-md-6">
                        <input type="text" class="form-control" name="search" 
                               placeholder="搜索文章..." value="{{ search_query }}">
                    </div>
                    <div class="col-md-4">
                        <select name="category" class="form-select">
                            <option value="">所有分类</option>
                            {% for category in categories %}
                            <option value="{{ category.id }}" 
                                    {% if selected_category == category.id|stringformat:"s" %}selected{% endif %}>
                                {{ category.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 文章列表 -->
        {% if posts %}
            {% for post in posts %}
            <div class="card post-card mb-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <h5 class="card-title">
                                <a href="{{ post.get_absolute_url }}" class="text-decoration-none">
                                    {{ post.title }}
                                </a>
                            </h5>
                            <p class="card-text text-muted">
                                {{ post.excerpt|truncatewords:30 }}
                            </p>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <i class="fas fa-user"></i> {{ post.author.username }} |
                                    <i class="fas fa-calendar"></i> {{ post.published_at|date:"Y-m-d" }} |
                                    <i class="fas fa-eye"></i> {{ post.views }} 次浏览
                                    {% if post.category %}
                                    | <i class="fas fa-tag"></i> {{ post.category.name }}
                                    {% endif %}
                                </small>
                                <a href="{{ post.get_absolute_url }}" class="btn btn-outline-primary btn-sm">
                                    阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}

            <!-- 分页 -->
            {% if posts.has_other_pages %}
            <nav aria-label="文章分页">
                <ul class="pagination justify-content-center">
                    {% if posts.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}">首页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ posts.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}">上一页</a>
                    </li>
                    {% endif %}

                    <li class="page-item active">
                        <span class="page-link">
                            第 {{ posts.number }} 页，共 {{ posts.paginator.num_pages }} 页
                        </span>
                    </li>

                    {% if posts.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ posts.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}">下一页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ posts.paginator.num_pages }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}">末页</a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}
        {% else %}
            <div class="text-center py-5">
                <i class="fas fa-search fa-3x text-muted mb-3"></i>
                <h4>没有找到相关文章</h4>
                <p class="text-muted">请尝试其他搜索条件</p>
            </div>
        {% endif %}
    </div>

    <!-- 侧边栏 -->
    <div class="col-lg-4">
        <div class="sidebar">
            <h5><i class="fas fa-list"></i> 文章分类</h5>
            <ul class="list-unstyled">
                <li><a href="{% url 'blog:post_list' %}" class="text-decoration-none">所有文章</a></li>
                {% for category in categories %}
                <li>
                    <a href="{% url 'blog:category_posts' category.id %}" class="text-decoration-none">
                        {{ category.name }}
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endblock %}
